<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.SHADOW.DESCRIPTION' | translate}}
      </p>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}</h3>
      <div class="free-demo-row">
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head>
                <ng-template>
                  {{'STYLE' | translate}}
                </ng-template>
              </free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>free-shadow-*dp</free-table-cell>
              <free-table-cell>
                *(1~24)
              </free-table-cell>
            </free-table-row>

          </free-table-body>
        </free-table>
      </div>
    </div>
    <div fGrid="6" class="free-demo-board">
      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="PREVIEW">
            <div class="box-shadow free-shadow-1dp">1dp</div>
            <div class="box-shadow free-shadow-2dp">2dp</div>
            <div class="box-shadow free-shadow-3dp">3dp</div>
            <div class="box-shadow free-shadow-4dp">4dp</div>
            <div class="box-shadow free-shadow-5dp">5dp</div>
            <div class="box-shadow free-shadow-6dp">6dp</div>
            <div class="box-shadow free-shadow-7dp">7dp</div>
            <div class="box-shadow free-shadow-8dp">8dp</div>
            <div class="box-shadow free-shadow-9dp">9dp</div>
            <div class="box-shadow free-shadow-10dp">10dp</div>
            <div class="box-shadow free-shadow-11dp">11dp</div>
            <div class="box-shadow free-shadow-12dp">12dp</div>
            <div class="box-shadow free-shadow-13dp">13dp</div>
            <div class="box-shadow free-shadow-14dp">14dp</div>
            <div class="box-shadow free-shadow-15dp">15dp</div>
            <div class="box-shadow free-shadow-16dp">16dp</div>
            <div class="box-shadow free-shadow-17dp">17dp</div>
            <div class="box-shadow free-shadow-18dp">18dp</div>
            <div class="box-shadow free-shadow-19dp">19dp</div>
            <div class="box-shadow free-shadow-20dp">20dp</div>
            <div class="box-shadow free-shadow-21dp">21dp</div>
            <div class="box-shadow free-shadow-22dp">22dp</div>
            <div class="box-shadow free-shadow-23dp">23dp</div>
            <div class="box-shadow free-shadow-24dp">24dp</div>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;div class="box-shadow free-shadow-1dp"&gt;1dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-2dp"&gt;2dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-3dp"&gt;3dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-4dp"&gt;4dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-5dp"&gt;5dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-6dp"&gt;6dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-7dp"&gt;7dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-8dp"&gt;8dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-9dp"&gt;9dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-10dp"&gt;10dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-11dp"&gt;11dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-12dp"&gt;12dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-13dp"&gt;13dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-14dp"&gt;14dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-15dp"&gt;15dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-16dp"&gt;16dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-17dp"&gt;17dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-18dp"&gt;18dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-19dp"&gt;19dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-20dp"&gt;20dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-21dp"&gt;21dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-22dp"&gt;22dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-23dp"&gt;23dp&lt;/div&gt;
              &lt;div class="box-shadow free-shadow-24dp"&gt;24dp&lt;/div&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
